<template>
    <div>
        <layout-header></layout-header>
        <div class="mw-index-swiper">
            <div v-swiper:bannerSwiper="bannerSwiperOption">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="swiper-item" style="background-image: url(/demo/images/banner-1-bg.jpg)">
                            <div class="swiper-item__inner" style="background-image: url(/demo/images/banner-1-image.png)">
                                <div class="container">
                                    <div class="row">
                                        <div class="text">
                                            <div data-swiper-parallax="-200">定制营销系统</div>
                                            <h3 data-swiper-parallax="-400">全面推动业绩增长</h3>
                                            <span data-swiper-parallax="-800">轻量级互动，学习行为分享</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="swiper-item" style="background-image: url(/demo/images/banner-1-bg.jpg)">
                            <div class="swiper-item__inner" style="background-image: url(/demo/images/banner-1-image.png)">
                                <div class="container">
                                    <div class="row">
                                        <div class="text">
                                            <div data-swiper-parallax="-200">定制营销系统</div>
                                            <h3 data-swiper-parallax="-400">全面推动业绩增长</h3>
                                            <span data-swiper-parallax="-800">轻量级互动，学习行为分享</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="swiper-item" style="background-image: url(/demo/images/banner-1-bg.jpg)">
                            <div class="swiper-item__inner" style="background-image: url(/demo/images/banner-1-image.png)">
                                <div class="container">
                                    <div class="row">
                                        <div class="text">
                                            <div data-swiper-parallax="-200">定制营销系统</div>
                                            <h3 data-swiper-parallax="-400">全面推动业绩增长</h3>
                                            <span data-swiper-parallax="-800">轻量级互动，学习行为分享</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="swiper-item" style="background-image: url(/demo/images/banner-1-bg.jpg)">
                            <div class="swiper-item__inner" style="background-image: url(/demo/images/banner-1-image.png)">
                                <div class="container">
                                    <div class="row">
                                        <div class="text">
                                            <div data-swiper-parallax="-200">定制营销系统</div>
                                            <h3 data-swiper-parallax="-400">全面推动业绩增长</h3>
                                            <span data-swiper-parallax="-800">轻量级互动，学习行为分享</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="swiper-item" style="background-image: url(/demo/images/banner-1-bg.jpg)">
                            <div class="swiper-item__inner" style="background-image: url(/demo/images/banner-1-image.png)">
                                <div class="container">
                                    <div class="row">
                                        <div class="text">
                                            <div data-swiper-parallax="-200">定制营销系统</div>
                                            <h3 data-swiper-parallax="-400">全面推动业绩增长</h3>
                                            <span data-swiper-parallax="-800">轻量级互动，学习行为分享</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination swiper-pagination-bullets"></div>
            </div>
        </div>
        <div class="mw-index-plan">
            <div class="container">
                <div class="row">
                    <div class="mw-index-plan__box">
                        <div class="sidebar">
                            <div class="title">
                                <i></i>
                                成熟<br>
                                解决方案
                            </div>
                            <div class="menu">
                                <div class="item" :class="{ 'active': planTabs === 0 }" @click="planTabs = 0">营销</div>
                                <div class="item" :class="{ 'active': planTabs === 1 }" @click="planTabs = 1">运营</div>
                            </div>
                        </div>
                        <div class="lists">
                            <div class="lists-box" :class="{ 'show': planTabs === 0 }">
                                <div class="lists-box__row">
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-1.png"/></div>
                                        <div class="name">品牌门户</div>
                                        <div class="en">Brand portal</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-2.png"/></div>
                                        <div class="name">拼团</div>
                                        <div class="en">Collage</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-3.png"/></div>
                                        <div class="name">1元试听</div>
                                        <div class="en">1 yuan Auditions</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-4.png"/></div>
                                        <div class="name">邀请函</div>
                                        <div class="en">Invitation</div>
                                    </a>
                                </div>
                                <div class="lists-box__row">
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-5.png"/></div>
                                        <div class="name">每日一练</div>
                                        <div class="en">daily practice</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-6.png"/></div>
                                        <div class="name">阅读打卡</div>
                                        <div class="en">daily practice</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-7.png"/></div>
                                        <div class="name">社群分享</div>
                                        <div class="en">Communal Sharing</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-8.png"/></div>
                                        <div class="name">其他活动分享</div>
                                        <div class="en">Other activities sharing</div>
                                    </a>
                                </div>
                            </div>
                            <div class="lists-box" :class="{ 'show': planTabs === 1 }">
                                <div class="lists-box__row">
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-5.png"/></div>
                                        <div class="name">每日一练</div>
                                        <div class="en">daily practice</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-6.png"/></div>
                                        <div class="name">阅读打卡</div>
                                        <div class="en">daily practice</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-7.png"/></div>
                                        <div class="name">社群分享</div>
                                        <div class="en">Communal Sharing</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-8.png"/></div>
                                        <div class="name">其他活动分享</div>
                                        <div class="en">Other activities sharing</div>
                                    </a>
                                </div>
                                <div class="lists-box__row">
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-1.png"/></div>
                                        <div class="name">品牌门户</div>
                                        <div class="en">Brand portal</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-2.png"/></div>
                                        <div class="name">拼团</div>
                                        <div class="en">Collage</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-3.png"/></div>
                                        <div class="name">1元试听</div>
                                        <div class="en">1 yuan Auditions</div>
                                    </a>
                                    <a href="#" class="lists-item">
                                        <div class="icon"><img src="/demo/images/icon-4.png"/></div>
                                        <div class="name">邀请函</div>
                                        <div class="en">Invitation</div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mw-index-wrap">
            <div class="mw-title-center">技术更优 · 服务更好</div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-3">
                        <div class="mw-index-window item-1">
                            <div class="text">
                                <div class="title">技术<span>可靠</span></div>
                                <div class="intro">6年行业内开发经验</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <div class="mw-index-window item-2">
                            <div class="text">
                                <div class="title">安全<span>稳定</span></div>
                                <div class="intro">7*24小时实时监测</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <div class="mw-index-window item-3">
                            <div class="text">
                                <div class="title">服务<span>贴心</span></div>
                                <div class="intro">全值午休的贴心服务</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <div class="mw-index-window item-4">
                            <div class="text">
                                <div class="title">优质<span>口碑</span></div>
                                <div class="intro">100%的客户满意度</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mw-index-wrap mw-index-news">
            <div class="container full">
                <div class="row full">
                    <div class="col-md-3">
                        <div class="mw-index-news__title">
                            <div class="title">
                                新闻资讯
                            </div>
                            <div class="pagination">
                                <div class="arrow left swiper-news-prev"></div>
                                <div class="arrow right swiper-news-next"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9 full">
                        <div v-swiper:newsSwiper="newsSwiperOption">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="mw-index-news__box">
                                        <div class="mw-index-news__item">
                                            <a href="#" class="mw-index-news__inner">
                                                <div class="title">教培易平台即将上市</div>
                                                <div class="intro">教育，教育者按照法律法规和行业规范，根据学校条件和职称，有目的有计划有组织的对受教育者的心。</div>
                                                <div class="bar">
                                                    <div class="view">查看详情</div>
                                                    <div class="time">2018.10.10</div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="mw-index-news__item">
                                            <a href="#" class="mw-index-news__inner">
                                                <div class="title">教培易平台即将上市</div>
                                                <div class="intro">教育，教育者按照法律法规和行业规范，根据学校条件和职称，有目的有计划有组织的对受教育者的心。</div>
                                                <div class="bar">
                                                    <div class="view">查看详情</div>
                                                    <div class="time">2018.10.10</div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="mw-index-news__item">
                                            <a href="#" class="mw-index-news__inner">
                                                <div class="title">教培易平台即将上市</div>
                                                <div class="intro">教育，教育者按照法律法规和行业规范，根据学校条件和职称，有目的有计划有组织的对受教育者的心。</div>
                                                <div class="bar">
                                                    <div class="view">查看详情</div>
                                                    <div class="time">2018.10.10</div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="mw-index-news__item">
                                            <a href="#" class="mw-index-news__inner">
                                                <div class="title">教培易平台即将上市</div>
                                                <div class="intro">教育，教育者按照法律法规和行业规范，根据学校条件和职称，有目的有计划有组织的对受教育者的心。</div>
                                                <div class="bar">
                                                    <div class="view">查看详情</div>
                                                    <div class="time">2018.10.10</div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="mw-index-news__box">
                                        <div class="mw-index-news__item">
                                            <a href="#" class="mw-index-news__inner">
                                                <div class="title">教培易平台即将上市</div>
                                                <div class="intro">教育，教育者按照法律法规和行业规范，根据学校条件和职称，有目的有计划有组织的对受教育者的心。</div>
                                                <div class="bar">
                                                    <div class="view">查看详情</div>
                                                    <div class="time">2018.10.10</div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="mw-index-news__item">
                                            <a href="#" class="mw-index-news__inner">
                                                <div class="title">教培易平台即将上市</div>
                                                <div class="intro">教育，教育者按照法律法规和行业规范，根据学校条件和职称，有目的有计划有组织的对受教育者的心。</div>
                                                <div class="bar">
                                                    <div class="view">查看详情</div>
                                                    <div class="time">2018.10.10</div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="mw-index-news__item">
                                            <a href="#" class="mw-index-news__inner">
                                                <div class="title">教培易平台即将上市</div>
                                                <div class="intro">教育，教育者按照法律法规和行业规范，根据学校条件和职称，有目的有计划有组织的对受教育者的心。</div>
                                                <div class="bar">
                                                    <div class="view">查看详情</div>
                                                    <div class="time">2018.10.10</div>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="mw-index-news__item">
                                            <a href="#" class="mw-index-news__inner">
                                                <div class="title">教培易平台即将上市</div>
                                                <div class="intro">教育，教育者按照法律法规和行业规范，根据学校条件和职称，有目的有计划有组织的对受教育者的心。</div>
                                                <div class="bar">
                                                    <div class="view">查看详情</div>
                                                    <div class="time">2018.10.10</div>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mw-index-wrap">
            <div class="mw-title-center">合作伙伴</div>
            <div class="container">
                <div class="row">
                    <div class="mw-index-partner">
                        <div class="mw-index-partner__row">
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-1.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-2.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-3.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-4.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-5.jpg"/>
                            </div>
                        </div>
                        <div class="mw-index-partner__row">
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-6.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-7.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-8.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-9.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-10.jpg"/>
                            </div>
                        </div>
                        <div class="mw-index-partner__row">
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-11.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-12.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-13.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-14.jpg"/>
                            </div>
                            <div class="mw-index-partner__item">
                                <img src="/demo/images/logo-15.jpg"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        head () {
            return {
                title: '首页'
            }
        },
        data () {
            return {
                bannerSwiperOption: {
                    speed: 800,
                    loop: true,
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    spaceBetween: 0,
                    parallax: true,
                    autoplay: {
                        delay: 8000,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination'
                    }
                },
                newsSwiperOption: {
                    speed: 800,
                    loop: false,
                    slidesPerView: 1,
                    centeredSlides: true,
                    spaceBetween: 35,
                    navigation: {
                        nextEl: '.swiper-news-next',
                        prevEl: '.swiper-news-prev',
                    }
                },
                planTabs: 0
            }
        }
    }
</script>